<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<html>
<head>
	<title>Pure js table test</title>
	<script type="text/javascript" charset="utf-8" src="./js/ru.datadir.DomHelper.js"></script>
	<script type="text/javascript" charset="utf-8" src="./js/pureJsTable.js"></script>
	<script type="text/javascript" charset="utf-8" src="./js/pureJsCrudForm.js"></script>

	<style type="text/css">
		body {
			font-family: verdana,​helvetica,​arial,​sans-serif;
			font-size: 12px;
		}

		h2 {
			font-size: 16px;
		}

		table {
			border-collapse: collapse;
		}

		table, th, td {
			border: 1px solid #98BF21;
			font-size: 12px;
		}


		th {
			background-color: #A7C942;
			color: white;
			padding: 5px;
		}

		td {
			padding: 5px;
		}

		.odd {
			background-color: #FFFFFF;
		}

		.even {
			background-color: #EAF2D3;
		}

		/* todo: move to common js */
		.dn {
			display: none;
		}
		.db {
			display: block;
		}

		.alignRight {
			text-align: right;
		}


	</style>
</head>
<body>
<div id="table-container"></div>
<div id="create-form-container" style="display: none;"></div>
<div id="read-form-container" style="display: none;"></div>
<div id="update-form-container" style="display: none;"></div>
<div id="delete-form-container" style="display: none;"></div>

<script type="text/javascript">
	var CONTAINER_ID = 'table-container';
	var CREATE_FORM_CONTAINER_ID = 'create-form-container';
	var READ_FORM_CONTAINER_ID = 'read-form-container';
	var UPDATE_FORM_CONTAINER_ID = 'update-form-container';
	var DELETE_FORM_CONTAINER_ID = 'delete-form-container';

	var metadata = {
		  id: 1
		, name: 'Car'
		, label: 'Машина'
		, comment: 'Тестовая таблица'

		, createLabel: 'Создать машину'
		, readLabel: 'Просмотр машины' // todo: or viewLabel
		, updateLabel: 'Изменить машину'
		, deleteLabel: 'Удалить машину'

		, attributes: [
			  { id: 1, displayOrder: 1, name: 'brand', label: 'Марка', type: 'string' }
			, { id: 2, displayOrder: 2, name: 'power', label: 'Мощность двигателя', type: 'float' }
			, { id: 3, displayOrder: 3, name: 'doorsCount', label: 'Количество дверей', type: 'integer' }
			, { id: 4, displayOrder: 4, name: 'color', label: 'Цвет', type: 'string' }
			, { id: 5, displayOrder: 5, name: 'comment', label: 'Комментарий', type: 'string' }
		]
	};

	var data = [
		  { id: 10, brand: 'Ferrari F40', power: 666.66, doorsCount: 2, color: 'Ferrari red', comment: 'Great car' }
		, { id: 11, brand: 'ЗАЗ-968 М', power: 75.3, doorsCount: 3, color: 'синий', comment: 'Персонаж анекдотов, ушастый запорожец' }
		, { id: 12, brand: 'McLaren F1', power: 580.12, doorsCount: 2, color: '#f1f032' }
		, { id: 13, brand: 'ВАЗ-2101', power: 40, doorsCount: 5, color: 'металлик ржавый такой' }
	];

	var crudConfig = {
		  containerId: CONTAINER_ID
		, metadata: metadata
		, data: data
		, oddTrClass: 'odd'
		, evenTrClass: 'even'

		, createFormContainerId: CREATE_FORM_CONTAINER_ID
		, readFormContainerId: READ_FORM_CONTAINER_ID
		, updateFormContainerId: UPDATE_FORM_CONTAINER_ID
		, deleteFormContainerId: DELETE_FORM_CONTAINER_ID
	};

	createEntityTable(crudConfig);

	createCreateForm(crudConfig);
	createReadForm(crudConfig);
</script>

</body>
</html>